<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.min.js"></script>
</head>

<body>
  <button id="btn">发送</button>
  <hr>
  <table border="1" width="100%">
    <thead>
      <tr>
        <th>id</th>
        <th>标题</th>
        <th>发布时间</th>
        <th>评论数量</th>
        <th>访问数量</th>
        <th>作者</th>
        <th>查看详情</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>
  <script>
    btn.onclick = function () {
      axios({
        url: 'https://cnodejs.org/api/v1/topics',
        method: "GET",
        params: {
          page: 1, limit: 10
        }
      }).then(function (res) {
        console.log(res.data);
        if (res.status === 200) {
          let html = ''
          res.data.data.forEach(item => {
            html += `<tr>
                       <th>${item.id}</th>
                       <th>${item.title}</th>
                       <th>${item.create_at}</th>
                       <th>${item.reply_count}</th>
                       <th>${item.visit_count}</th>
                       <th>${item.author.loginname}</th>
                       <th><a href="https://cnodejs.org/topic/${item.id}" target="_blank">查看详情</a></th>

                    </tr>`
          })
          tbody.innerHTML = html
        }
      })
    }
  </script>
</body>

</html>